<template>
	<!-- <view class="btn_container"> -->
		<tui-list-cell class="none_border" :hover="false" :arrow="theOptions.readonly?false:true">
			<view class="btn_line">
			  	<button :type="theOptions.type" :disabled="theOptions.disabled" :class="btnClass" @click='handle(theOptions.handle)'>{{theOptions.handleName? theOptions.handleName : theOptions.handle}}</button>
			</view>
			
		</tui-list-cell>
</template>

<script>
	export default {
		name: 'kmlc-button',
		props: {
			label: {
				type: String
			},
			emData: {
				type: Object
			},
			options: {
				type: Object
			},
			rules:{
				type:Array
			}
		},
		data() {
			return {
				theOptions: {},
				btnClass: 'base_style',
				theRules:[],
			}
		},
		created() {
			if (this.emData && this.emData.options) {
				if(this.emData.rules){
					this.theRules = this.emData.rules
				};
				this.theOptions = this.emData.options;
			} else {
				this.theOptions = this.options;
			}

			switch (this.theOptions.type) {
				case 'primary':
					this.btnClass = 'base_style primary_style';
					break;

				case 'default':
					this.btnClass = 'base_style default_style';
					break;

				case 'dashed':
					this.btnClass = 'base_style dashed_style';
					break;

				case 'danger':
					this.btnClass = 'base_style danger_style';
					break;

				default:
					this.btnClass = 'base_style default_style';
			};
			
			if(this.theOptions.disabled == true){
				this.btnClass = 'base_style disable_style';
			}
		},
		methods: {
			handle(hand){
				this.$emit(`${hand}`,{type:hand})
			},
		}
	}
</script>

<style>
	.none_border{
		border: none;
	}
	.btn_line{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.btn_title{
		min-width: 100upx;
		line-height: 32rpx;
		flex-shrink: 0;
	}
	
	.btn_content{
		border: none;
		outline: none;
		display: flex;
		justify-content: center;
	}

	.base_style {
		border: none;
		outline: none;
		background: none;
		border-radius: 15upx;
		font-size: 24upx;
		margin: 0 6upx;
	}

	.default_style {
		border: 1upx solid #d9d9d9;
		background: #FFFFFF;
	}

	.primary_style {
		border: none;
		background: #13c2c2;
	}

	.dashed_style {
		border: 1upx dashed #d9d9d9;
		background: #FFFFFF;
	}

	.danger_style {
		background: #ff4d4f;
		border: none;
	}
	
	.disable_style{
		color: rgba(0,0,0,.25);
		background-color: #f5f5f5;
		border: 1upx solid #d9d9d9;
	}
</style>
